import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Navigation from '@/components/Navigation';
import ChatAlbum from '../ChatAiBum/ChatAlbum';
import ChatHistoryList from '../ChatHistory/ChatHistoryList';
import type { AiPersonData } from '@/hooks/useAiPersonData';
import type { ChatHistoryItem } from '@/hooks/useChatHistoryManager';

interface AvatarModalProps {
  show: boolean;
  onClose: () => void;
  activeTab: string;
  setActiveTab: (tab: string) => void;
  aiPersonData?: AiPersonData | null;
  loading?: boolean;
  // 聊天历史相关props
  historyList?: ChatHistoryItem[];
  currentChatId?: string;
  onSelectChat?: (id: string, replace?: boolean) => void;
  onResetChat?: (id: string) => void;
  onDeleteChat?: (id: string) => void;
  historyLoading?: boolean;
  historyError?: string | null;
  onRefreshData?: () => Promise<any>; // 新增：刷新数据函数
}

/**
 * AI头像点击后显示的弹窗组件
 * 包含Navigation的header和侧边栏功能，可切换显示ChatAlbum或ChatHistoryList
 */
const AvatarModal: React.FC<AvatarModalProps> = ({ 
  show, 
  onClose, 
  activeTab, 
  setActiveTab,
  aiPersonData,
  loading = false,
  historyList = [],
  currentChatId = '',
  onSelectChat,
  onResetChat,
  onDeleteChat,
  historyLoading,
  historyError,
  onRefreshData
}) => {
  const [sidebarVisible, setSidebarVisible] = useState(false); // 侧边栏显示状态
  const [showChatHistory, setShowChatHistory] = useState(false); // 控制是否显示聊天历史列表

  // 侧边栏切换函数
  const toggleSidebar = () => {
    setSidebarVisible(v => !v);
  };

  // 处理聊天收藏点击
  const handleChatCollectionClick = () => {
    setShowChatHistory(true);
    setSidebarVisible(false); // 关闭侧边栏
  };

  // 处理聊天历史关闭
  const handleChatHistoryClose = () => {
    setShowChatHistory(false);
  };

  // 处理选择聊天
  const handleSelectChat = (id: string) => {
    if (onSelectChat) {
      onSelectChat(id, true); // 传递replace=true，不留历史记录
    }
    setShowChatHistory(false); // 重置ChatHistoryList状态
    onClose(); // 关闭整个弹窗
  };

  // 处理重置聊天
  const handleResetChat = (id: string) => {
    if (onResetChat) {
      onResetChat(id);
    }
  };

  // 处理删除聊天
  const handleDeleteChat = (id: string) => {
    if (onDeleteChat) {
      onDeleteChat(id);
    }
  };

  if (!show) return null;

  return ReactDOM.createPortal(
    <div className="fixed inset-0 z-50 bg-[rgb(19,19,19)]">
      {/* 关闭按钮 */}
      <div className="absolute top-4 right-4 z-60">
        <button
          onClick={onClose}
          className="text-white hover:text-pink-500 transition-colors p-2 bg-black/20 rounded-full"
        >
          <i className="fas fa-times text-xl"></i>
        </button>
      </div>

      {/* 复用Navigation组件 */}
      <Navigation
        isMobile={true}
        sidebarCollapsed={false}
        sidebarVisible={sidebarVisible}
        toggleSidebar={toggleSidebar}
        headerHidden={false}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        onChatCollectionClick={handleChatCollectionClick}
      />

      {/* 内容区域 - 根据状态切换显示内容 */}
      <div className="pt-16 h-full">
        {showChatHistory ? (
          <ChatHistoryList
            historyList={historyList}
            currentId={currentChatId}
            onSelect={handleSelectChat}
            onReset={handleResetChat}
            onDelete={handleDeleteChat}
            onClose={handleChatHistoryClose}
            loading={historyLoading}
            error={historyError}
            onRefreshData={onRefreshData}
          />
        ) : (
          <ChatAlbum
            aiPersonData={aiPersonData}
            loading={loading}
            onClose={onClose}
          />
        )}
      </div>
    </div>,
    document.body
  );
};

export default AvatarModal; 